import React, { Component } from 'react'
import {Switch, Route, NavLink} from 'react-router-dom'

import Top from './Top'
import Bottom from './Bottom'
import Child1 from './Child1'
import Child2 from './Child2'
import Child3 from './Child3'

export default class Layout extends Component {
  render() {
    return (
      <div>
          <p>嵌套路由：当很多页面中有重复的结构时，可以将重复的部分提取出来，剩下会变的部分通过路由控制</p>
          <Top></Top>
          {/* 这里就是子路由的代码 */}
          <Switch>
              {/* 默认的自路由，就是只写父路由，故意不写子路由 */}
              <Route path="/layout" component={Child1}></Route>
              <Route path="/layout/child2" component={Child2}></Route>
              <Route path="/layout/child3" component={Child3}></Route>
          </Switch>
          <Bottom></Bottom>
          <NavLink exact to="/layout">page1</NavLink>
          <NavLink exact to="/layout/child2">page2</NavLink>
          <NavLink exact to="/layout/child3">page3</NavLink>
      </div>
    )
  }
}
